/* eslint-disable no-nested-ternary */
import React, {
  ReactElement,
  useContext,
  useEffect,
  useRef,
  useCallback,
  useState
} from 'react';
import { View, Text, Image } from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import { play, cover } from '../../../../constant/resource';
import { setAudioAvailable } from '../../../../util/RTC/rtcEngine';
import MediaPlayer from '../../../../components/MediaPlayer';
import Button from '../../../../components/Button';
import {
  CLASS_ROOM_RIGHT_SCALE,
  LIVE_AREA,
  LIVE_AREA_HEIGHT,
  UserRole
} from '../../constant';
import { getUserInfo } from '../../../../store/user';
import Corner from '../Graph/Corner';
import { phonePx } from '../../../../util/adapt';

export default (): ReactElement => {
  const introVideoPlayer = useRef<any>(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const { state } = useContext(Store);
  const { showPrepare, welcomeData } = state;
  const { startImageURL, startVideoURL } = welcomeData;

  const { role } = getUserInfo();
  const isStudent = role === UserRole.Student;

  const introVideoStart = useCallback((): void => {
    if (introVideoPlayer && introVideoPlayer.current) {
      introVideoPlayer.current.start();
      introVideoPlayer.current.setZOrderMediaOverlay(true);
      introVideoPlayer.current.setZOrderOnTop(false);
    }
  }, []);

  const introVideoPause = useCallback((): void => {
    if (introVideoPlayer && introVideoPlayer.current) {
      introVideoPlayer.current.pause();
    }
  }, []);

  const onIntroLoad = useCallback((): void => {
    if (!isPlaying) {
      setTimeout((): void => {
        introVideoPause();
      }, 200);
    }
  }, [introVideoPause, isPlaying]);

  const onIntroVideoEnd = (): void => {
    setIsPlaying(false);
    if (introVideoPlayer && introVideoPlayer.current) {
      introVideoPlayer.current.seek(0);
    }
  };

  const toggleVideo = (): void => {
    if (!isPlaying) {
      setIsPlaying(true);
      introVideoStart();
      if (isStudent) {
        setAudioAvailable(false, 'startPrepareVideo');
      }
    } else {
      setIsPlaying(false);
      introVideoPause();
      if (isStudent) {
        setAudioAvailable(true, 'pausePrepareVideo');
      }
    }
  };

  useEffect((): void => {
    if (!showPrepare) {
      introVideoPause();
    }
  }, [introVideoPause, isStudent, showPrepare]);

  if (!showPrepare) return <View />;

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Image
          style={styles.cover}
          source={startImageURL ? { uri: startImageURL } : cover}
        />
      </View>
      <View style={styles.rightContent}>
        <Button
          style={styles.loadTeacher}
          activeOpacity={1}
          onPress={toggleVideo}
        >
          <MediaPlayer
            autoPlay
            style={styles.teacherPlayer}
            ref={introVideoPlayer}
            src={startVideoURL}
            onLoad={onIntroLoad}
            onEnd={onIntroVideoEnd}
            size={{ width: LIVE_AREA, height: LIVE_AREA_HEIGHT }}
          />
          <View
            style={[styles.teacherMask, !isPlaying ? {} : styles.hiddenTeacher]}
          >
            <View style={styles.loadTeacherDesc}>
              <Image style={styles.playIcon} source={play} />
              <Text style={styles.teacherDesc}>老师简介</Text>
            </View>
          </View>
          <View style={styles.leftLine} />
          <View style={styles.topLine} />
          <View style={styles.rightLine} />
          <View style={styles.bottomLine} />
          <Corner
            style={styles.corner}
            width={LIVE_AREA - phonePx(8) * CLASS_ROOM_RIGHT_SCALE}
            height={LIVE_AREA_HEIGHT - phonePx(6) * CLASS_ROOM_RIGHT_SCALE}
            dia={phonePx(4) * CLASS_ROOM_RIGHT_SCALE}
          />
        </Button>
      </View>
    </View>
  );
};
